const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
          // 自动修复错误
          fix: true
        }
      },
      /*
      * js兼容性处理 babel-loader @babel-core
      * 1、基本js兼容性处理 --> @babel/preset-env
      * 问题：只能转换基本语法，如promise语法不能转换
      * 2、全部js兼容性处理 --> @babel/polyfill
      * 问题：不能按需加载，体积太大
      * 3、按需加载 --> core-js
      * */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader:'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                // {
                //   useBuiltIns:'usage',
                //   corejs:{
                //     //core-js的版本
                //     version:3
                //   },
                //   //需要兼容的浏览器
                //   targets: {
                //     chrome:'60',
                //     firefox:'60',
                //     ie:'9',
                //     safari:'10',
                //     edge:'17'
                //   }
                // }
              ]
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: 'body',
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],
  // js压缩只需要启动mode为production
  mode: 'production'
}